<!-- 起步 -->
<template>
	<div class='container'>
		<a-layout>
			<a-layout-content class='layout-content' ref='content'>
				<a-card>
					<h1>商品列表</h1>
					<div id="box1" class="box">
						<h2>1. 创建 goodslist   分支</h2>
						<p>运行如下的命令，基于 master 分支在本地创建 goodslist  子分支，用来开发分类页面相关的功能：</p>
						<code-mirror :value="code[0]" :options="cmOptions"> </code-mirror>
					</div>
					<div class="box" id="box2">
						<h2>2. 定义请求参数对象</h2>
						<ol>
							<li>
								<p>为了方便发起请求获取商品列表的数据，我们要根据接口的要求，事先定义一个请求参数对象：</p>
								<code-mirror :value="code[1]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将页面跳转时携带的参数，转存到 queryObj 对象中：</p>
								<code-mirror :value="code[2]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>为了方便开发商品分类页面，建议大家通过微信开发者工具，新建商品列表页面的编译模式：	</p>
								<el-image style="width: 100%;" :src="srcList[0]" fit="contain"
										:preview-src-list="srcList">
									</el-image> 
							</li>
						</ol>
					</div>
					<div class="box" id="box3">
						<h2>3. 获取商品列表数据</h2>
						<ol>
							<li>
								<p>在 data 中新增如下的数据节点：</p>
								<code-mirror :value="code[3]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>在 onLoad 生命周期函数中，调用 getGoodsList 方法获取商品列表数据：</p>
								<code-mirror :value="code[4]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>在 methods 节点中，声明 getGoodsList 方法如下：</p>
								<code-mirror :value="code[5]" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div class="box" id="box4">
						<h2>4. 渲染商品列表结构</h2>
						<ol>
							<li>
								<p>在页面中，通过 v-for 指令，循环渲染出商品的 UI 结构</p>
								<code-mirror :value="code[6]" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>为了防止某些商品的图片不存在，需要在 data 中定义一个默认的图片：</p>
								<code-mirror :value="code[7]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>并在页面渲染时按需使用：</p>
								<code-mirror :value="code[8]" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>美化商品列表的 UI 结构：</p>
								<code-mirror :value="code[9]" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div class="box" id="box5">
						<h2>5. 把商品 item 项封装为自定义组件</h2>
						<ol>
							<li>
								<p>在 components 目录上鼠标右键，选择 新建组件：</p>
								<el-image style="width: 100%;" :src="srcList[1]" fit="contain"
										:preview-src-list="srcList">
									</el-image> 
							</li>
							<li>
								<p>将 goods_list 页面中，关于商品 item 项相关的 UI 结构、样式、data 数据，封装到 my-goods 组件中：</p>
								<code-mirror :value="code[10]" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>在 goods_list 组件中，循环渲染 my-goods 组件即可：</p>
								<code-mirror :value="code[11]" :options="cmOptions1"> </code-mirror>
							</li>
						</ol>
					</div>
					<div class="box" id="box6">
						<h2>6. 使用过滤器处理价格</h2>
						<ol>
							<li>
								<p>在 my-goods 组件中，和 data 节点平级，声明 filters 过滤器节点如下：</p>
								<code-mirror :value="code[12]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>在渲染商品价格的时候，通过管道符 | 调用过滤器：</p>
								<code-mirror :value="code[13]" :options="cmOptions1"> </code-mirror>	
							</li>
						</ol>
					</div>
					<div class="box" id="box7">
						<h2>7. 上拉加载更多</h2>
						<div class="item" id="box7-1">
							<h3>7-1. 初步实现上拉加载更多</h3>
							<ol>
								<li>
									<p>打开项目根目录中的 pages.json 配置文件，为 subPackages 分包中的 goods_list 页面配置上拉触底的距离：</p>
									<code-mirror :value="code[14]" :options="cmOptions"> </code-mirror>	
								</li>
								<li>
									<p>在 goods_list 页面中，和 methods 节点平级，声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为：</p>
									<code-mirror :value="code[15]" :options="cmOptions"> </code-mirror>	
								</li>
								<li>
									<p>改造 methods 中的 getGoodsList 函数，当列表数据请求成功之后，进行新旧数据的拼接处理：</p>
									<code-mirror :value="code[16]" :options="cmOptions"> </code-mirror>	
								</li>
							</ol>
						</div>
						<div class="item" id="box7-2">
							<h3>7-2 通过节流阀防止发起额外的请求</h3>
							<ol>
								<li>
									<p>在 data 中定义 isloading 节流阀如下：</p>
									<code-mirror :value="code[17]" :options="cmOptions"> </code-mirror>	
								</li>
								<li>
									<p>修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀：</p>
									<code-mirror :value="code[18]" :options="cmOptions"> </code-mirror>	
								</li>
								<li>
									<p>在 onReachBottom 触底事件处理函数中，根据节流阀的状态，来决定是否发起请求：</p>
									<code-mirror :value="code[19]" :options="cmOptions"> </code-mirror>	
								</li>
							</ol>
						</div>
						<div class="item" id="box7-3">
							<h3>7-3. 判断数据是否加载完毕</h3>
							<ol>
								<li>
									<p>如果下面的公式成立，则证明没有下一页数据了：</p>
									<code-mirror :value="code[20]" :options="cmOptions"> </code-mirror>	
								</li>
								<li>
									<p>修改 onReachBottom 事件处理函数如下：</p>
									<code-mirror :value="code[21]" :options="cmOptions"> </code-mirror>	
								</li>
							</ol>
						</div>
					</div>
					<div class="box" id="box8">
						<h2>8. 下拉刷新</h2>
						<ol>
							<li>
								<p>在 pages.json 配置文件中，为当前的 goods_list 页面单独开启下拉刷新效果：</p>
								<code-mirror :value="code[22]" :options="cmOptions"> </code-mirror>	
							</li>
							<li>
								<p>监听页面的 onPullDownRefresh 事件处理函数：</p>
								<code-mirror :value="code[23]" :options="cmOptions"> </code-mirror>	
							</li>
							<li>
								<p>修改 getGoodsList 函数，接收 cb 回调函数并按需进行调用：</p>
								<code-mirror :value="code[24]" :options="cmOptions"> </code-mirror>	
							</li>
						</ol>
					</div>
					<div class="box" id="box9">
						<h2>9. 点击商品 item 项跳转到详情页面</h2>
						<ol>
							<li>
								<p>将循环时的 block 组件修改为 view 组件，并绑定 click 点击事件处理函数：</p>
								<code-mirror :value="code[25]" :options="cmOptions1"> </code-mirror>	
							</li>
							<li>
								<p>在 methods 节点中，定义 gotoDetail 事件处理函数：</p>
								<code-mirror :value="code[26]" :options="cmOptions"> </code-mirror>	
							</li>
						</ol>
					</div>
					<div id="box10" class="box">
						<h2>10. 分支的合并与提交</h2>
						<ol>
							<li>
								<p>将 goodslist  分支进行本地提交：</p>
								<code-mirror :value="code[27]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地的 goodslist  分支推送到码云：</p>
								<code-mirror :value="code[28]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地 goodslist  分支中的代码合并到 master 分支：</p>
								<code-mirror :value="code[29]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>删除本地的 goodslist  分支：</p>
								<code-mirror :value="code[30]" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
				</a-card>
			</a-layout-content>
			<a-layout-sider class='layout-sider' width='300'>
				<a-anchor affix :getContainer='getContainer'  :wrapperStyle="{maxHeight: 'calc( 100vh - 120px)'}"	@click="handleClick">
					<a-anchor-link href="#box1" title="1. 创建 goodslist   分支" />
					<a-anchor-link href="#box2" title="2. 定义请求参数对象" />
					<a-anchor-link href="#box3" title="3. 获取商品列表数据" />
					<a-anchor-link href="#box4" title="4. 渲染商品列表结构" />
					<a-anchor-link href="#box5" title="5. 把商品 item 项封装为自定义组件" />
					<a-anchor-link href="#box6" title="6. 使用过滤器处理价格" />
					<a-anchor-link href="#box7" title="7. 上拉加载更多" >
						<a-anchor-link href="#box7-1" title="7-1. 初步实现上拉加载更多" />
						<a-anchor-link href="#box7-2" title="7-2 通过节流阀防止发起额外的请求" />
						<a-anchor-link href="#box7-3" title="7-3. 判断数据是否加载完毕" />
					</a-anchor-link>
					<a-anchor-link href="#box8" title="8. 下拉刷新" />
					<a-anchor-link href="#box9" title="9. 点击商品 item 项跳转到详情页面" />
					<a-anchor-link href="#box10" title="10. 分支的合并与提交" />
				</a-anchor>
			</a-layout-sider>
		</a-layout>

	</div>
</template>
<script>
	import {
		shopList
	} from '../../util/code.js'
	import img1 from '@/assets/shopList1.png'
	import img2 from '@/assets/shopList2.png'
	export default {
		name: 'shopList',
		data() {
			return {
				srcList:[img1,img2],
				cmOptions: {
					mode: "javascript",
					theme: "base16-dark",
					disabled: true
				},
				cmOptions1: {
					mode: "vue",
					theme: "base16-dark",
					disabled: true
				},
				code: shopList
			}
		},
		methods: {
			getContainer() {
				return this.$refs.content.$el
			},
			handleClick(e, link) {
				// 阻止点击的默认事件修改路由
				e.preventDefault();
				if (link.href) {
					let ele = document.getElementById(link.href);
					ele && ele.scrollIntoView({
						block: 'start',
						behavior: 'smooth'
					});
				}
			}
		}
	}
</script>
<style scoped>
</style>
